import React from 'react';
import { FiTrendingUp, FiPieChart, FiDollarSign, FiBarChart2 } from 'react-icons/fi';

const DashboardCard = ({ title, value, change, icon, color }) => {
  const getIcon = () => {
    switch (icon) {
      case 'trending-up':
        return <FiTrendingUp size={24} />;
      case 'pie-chart':
        return <FiPieChart size={24} />;
      case 'dollar-sign':
        return <FiDollarSign size={24} />;
      case 'bar-chart':
        return <FiBarChart2 size={24} />;
      default:
        return <FiTrendingUp size={24} />;
    }
  };

  const isPositive = change && change.startsWith('+');
  
  return (
    <div className="dashboard-card">
      <div className="card-icon" style={{ backgroundColor: `${color}20`, color: color }}>
        {getIcon()}
      </div>
      <h3>{title}</h3>
      <div className="value">{value}</div>
      <div className={`change ${isPositive ? 'positive' : 'negative'}`}>
        {change}
      </div>
    </div>
  );
};

export default DashboardCard;